<template>
    <div class="project-container">
       <div class="project-top">
         <h3>项目管理</h3>
         <div class="search-box">

         </div>
       </div>
      <div class="project-content">
        <div class="add">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table
          :data="projectList"
          style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="houseName" label="项目名称"></el-table-column>
          <el-table-column prop="houseDescription" label="项目概要"></el-table-column>
          <el-table-column prop="houseDetailDescription" label="项目详情"></el-table-column>
          <el-table-column prop="telephone" label="电话"></el-table-column>
          <el-table-column  fixed="right" label="操作" width="350">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button size="mini"  @click="handleEditHouseType(scope.$index,scope.row)">编辑户型</el-button>
              <el-button size="mini"  @click="handleEditBannerType(scope.$index,scope.row)">banner编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="pageIndex"
            @current-change="currentChange"
            :page-count="pageCount">
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        width="40%">
        <div class="pop-box">
          <div class="grid-content">
            <p>项目名称：</p><el-input v-model="houseName" placeholder="请输入项目名称"></el-input>
          </div>
          <div class="grid-content">
            <p>省：</p><el-input v-model="province" placeholder="请输入项目名称"></el-input>
          </div>
          <div class="grid-content">
            <p>市：</p><el-input v-model="city" placeholder="请输入项目名称"></el-input>
          </div>
          <div class="grid-content">
            <p>区县街道 ：</p><el-input v-model="district" placeholder="请输入区县街道 "></el-input>
          </div>
          <div class="grid-content">
            <p>详细地址：</p><el-input v-model="address" placeholder="请输入项目名称"></el-input>
          </div>
          <div class="grid-content">
            <p>项目概要：</p><el-input type="textarea" v-model="houseDescription" placeholder="请输入项目概要"></el-input>
          </div>
          <div class="grid-content">
            <p>电话：</p><el-input type="number" v-model="telephone" placeholder="请输入项目电话"></el-input>
          </div>
          <div class="grid-content">
            <p>项目动态：</p>
            <el-input type="textarea" v-model="houseNews" placeholder="请输入项目动态"></el-input>
          </div>
          <div class="grid-content">
            <p>项目详情：</p>
            <el-input type="textarea" v-model="houseDetailDescription" placeholder="请输入项目详情"></el-input>
          </div>
          <div class="grid-content">
            <p>价格：</p>
            <el-input type="number" v-model="price" placeholder="请输入项目价格"></el-input>
          </div>
          <div class="grid-content">
            <p>是否推荐：</p>
            <el-select v-model="recommend" placeholder="请选择">
              <el-option
                v-for="item in recommendList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="submit">确 定</el-button>
       </span>
      </el-dialog>
      <el-dialog
        width="60%"
        title="户型图编辑"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        append-to-body>
        <div class="inner-box">
          <el-row v-for="(item,index) in houseTypeList" :key="index">
            <el-col :span="3">
              <div class="grid-content">
                <div class="banner-box">
                  <el-upload
                    class="avatar-uploader"
                    action="/api/img/upload"
                    :show-file-list="false"
                    :data="picData"
                    :headers="headers"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="item.imgAddress" :src="item.imgAddress" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleGetPosition(index)"></i>
                  </el-upload>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                户型：<el-input  v-model="item.imgDescription1" placeholder="请输入户型如3室2厅"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                面积：<el-input type="number" v-model="item.imgDescription3" placeholder="请输入面积"></el-input>㎡
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                大约总价：<el-input type="number" v-model="item.imgDescription2" placeholder="请输入总价"></el-input>万
              </div>
            </el-col>
            <el-col :span="3">
              <el-button v-if="index>0" @click="handleDelt(index)">删除</el-button>
            </el-col>
          </el-row>
          <el-button type="primary" @click="addHouseType">增加户型图</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handleCheckHouseType">确 定</el-button>
            </span>
      </el-dialog>
      <el-dialog
        width="60%"
        title="banner编辑"
        :visible.sync="innerVisibleBanner"
        :close-on-click-modal="false"
        append-to-body>
        <div class="inner-box">
          <el-upload
            action="/api/img/upload"
            list-type="picture-card"
            multiple
            :data="picData"
            :headers="headers"
            :file-list="bannerList"
            :on-success="sendPicSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
               <el-button @click="innerVisibleBanner = false">取 消</el-button>
              <el-button type="primary" @click="handleCheckBannerType">确 定</el-button>
            </span>
      </el-dialog>
    </div>
</template>

<script>
  import apiDataFilter from "../../../utils/apiDataFilter";
  import Cookies from 'js-cookie'

  export default {
    name: "project",
    data(){
      return{
        projectList:[],
        pageCount:null,
        pageIndex:1,
        dialogVisible:false,
        houseName:'',
        houseDescription:'',
        telephone:'',
        houseNews:'',
        houseDetailDescription:'',
        province:'',
        city:'',
        district:'',
        address:'',
        recommend:false,
        recommendList:[{id:false,name:'否'},{id:true,name:'是'}],
        price:'',
        bannerList:[],
        imgList:[],
        picData:{imgType:1},
        headers:{token:Cookies.get('Authorization')},
        typeList:[],
        typeImg:[],
        innerVisible:false,
        houseTypeList:[
          {imgAddress:'',imgDescription1:'',imgDescription2:'',imgDescription3:'',imgType:10402}
        ],
        position:null,
        id:'',
        innerVisibleBanner:false,

      }
    },
    methods:{
      getProjectList(){
        let param = {page:this.pageIndex,pageSize:10};
        apiDataFilter.request({
          apiPath:'house.getAllHouse',
          data:param,
          method:'post',
          successCallback:(res)=>{
            this.projectList = res.data.list;
            this.pageCount = Math.ceil(res.data.totalCount/10);
          }
        })
      },
      /*新增*/
      handleAdd(){
        this.dialogVisible = true;
        this.id = '';
        this.houseName = '';
        this.houseDescription = '';
        this.telephone = '';
        this.houseNews = '';
        this.houseDetailDescription = '';
        this.province = '';
        this.city ='';
        this.district = '';
        this.address = '';
        this.recommend = '';
        this.price = '';
      },
      /*编辑*/
      handleEdit(index,row){
        this.dialogVisible = true;
        this.id = row.id;
        this.houseName = row.houseName;
        this.houseDescription = row.houseDescription;
        this.telephone = row.telephone;
        this.houseNews = row.houseNews;
        this.houseDetailDescription = row.houseDetailDescription;
        this.province = row.province;
        this.city = row.city;
        this.district = row.district;
        this.address = row.address;
        this.recommend = row.recommend;
        this.price = row.price;
      },
      currentChange(val){
        this.pageIndex = val;
        this.getProjectList();
      },
      /*上传图片*/
      sendPicSuccess(res, file, fileList) {
        this.imgList = this.handleAddReducePic(fileList);
      },
      /*删除图片*/
      handleRemove(file, fileList) {
        this.imgList = this.handleAddReducePic(fileList);
      },
      /*上传户型图片*/
      sendTypePicSuccess(res, file, fileList){
        this.typeImg = this.handleAddReducePic(fileList);
      },
      /*删除图片*/
      handleTypeRemove(file, fileList) {
        this.typeImg = this.handleAddReducePic(fileList);
      },
      /*图片数据列表形式*/
      handleAddReducePic(fileList) {
        let imgList = [];
        if (fileList.length > 0) {
          fileList.forEach((item, index) => {
            if ('response' in item) {
              imgList.push(item.response.data)
            } else {
              imgList.push(item.url)
            }
          })
        } else {
          imgList = []
        }
        return imgList
      },
      handleCheck(){
        if (!this.houseName || !this.houseDescription ){

        }
      },
      /*拉取户型图*/
      handleEditHouseType(index,row){
        this.id = row.id;
        this.getHouseTypeImg(2);
        this.innerVisible = true;
      },
      /*拉取图片*/
      getHouseTypeImg(type){
        let param = {houseId:this.id,imgType:type == 1 ? 10404:10402}
        apiDataFilter.request({
          apiPath:'house.getHouseImgs',
          data:param,
          method:'post',
          successCallback:(res)=>{
             if (type == 1){
               this.bannerList = res.data || [];
               this.bannerList.forEach((item,index)=>{
                 this.bannerList[index].url = item.imgAddress;
               });
             } else {
               this.houseTypeList = res.data;
             }
          }
        })
      },
      /*户型图上传成功*/
      handleAvatarSuccess(res, file){
         this.houseTypeList[this.position].imgAddress = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      /*添加户型图*/
      addHouseType(){
        let item =  {imgAddress:'',imgDescription1:'',imgDescription2:'',imgDescription3:'',imgType:10402};
        this.houseTypeList.push(item)
      },
      /*删除元素*/
      handleDelt(index){
        this.houseTypeList.splice(index,1)
      },
      /*上传户型图的位置*/
      handleGetPosition(index){
        this.position = index;
      },
      /*提交户型图*/
      handleCheckHouseType(){
        let list = [];
         list =  this.houseTypeList.filter((item)=>{
           return !item.imgAddress == true || !item.imgDescription1 == true || !item.imgDescription2 == true || !item.imgDescription3 == true
        })
        if (list.length > 0){
          this.$message.error('请完善信息')
          return
        }
        this.handleSubmit();
      },
      /*提交户型图*/
      handleSubmit(){
        this.houseTypeList.forEach((item,index)=>{
           item.houseId = this.id;
        });
        let param ={houseImgs:this.houseTypeList,houseId:this.id,imgType:10402};
        apiDataFilter.request({
          apiPath:'house.addHouseImgs',
          method:'post',
          data:param,
          successCallback:(res)=>{
            this.$message.success('提交成功');
            this.innerVisible = false;
          }
        })
      },
      /*点击维护banner*/
      handleEditBannerType(index,row){
        this.id = row.id
        this.innerVisibleBanner = true;
        this.getHouseTypeImg(1);
      },
      /*提交banner图*/
      handleCheckBannerType(){
        let list = [];
        if (this.imgList.length > 0){
          this.imgList.forEach((item,index)=>{
            list.push({houseId:this.id,imgAddress:item,imgType:10404})
          });
          let param ={houseImgs:list,houseId:this.id,imgType:10404};
          apiDataFilter.request({
            apiPath:'house.addHouseImgs',
            method:'post',
            data:param,
            successCallback:(res)=>{
              this.$message.success('提交成功');
              this.innerVisibleBanner = false;
            }
          })
        }else {
           this.$message.error('没有更改banner信息哦！')
        }
      },

      /*提交*/
      submit(){
        let param = {address:this.address,city:this.city,district:this.district,houseDescription:this.houseDescription,
          houseDetailDescription:this.houseDetailDescription,houseName:this.houseName,houseNews:this.houseNews,price:this.price,
          province:this.province,recommend:this.recommend ? 1:0,telephone:this.telephone}
          this.id ? Object.assign(param,{id:this.id}):'';
        apiDataFilter.request({
          apiPath:'house.save',
          method:'post',
          data:param,
          successCallback:(res)=>{
            this.$message.success('提交成功');
            this.dialogVisible = false;
            this.getProjectList();
          }
        })
      }
    },
    created(){
      this.getProjectList();
    }
  }
</script>

<style scoped lang='less'>
    @import "project.less";
</style>
